<template>
    <div>
        <div class="page-title">任务大厅</div>
        <div class="container padder-md padder-v">
            <div class="dialog-body">
                <div class="title">新手任务</div>
                <el-table
                        v-loading="loading"
                        :data="taskList"
                        style="width: 100%">
                    <el-table-column
                            prop="renwu_mingcheng"
                            label="任务名称"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="renwu_xiangqing"
                            label="任务详情"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="renwu_jiangli"
                            label="任务奖励（元）">
                        <template v-slot="scope">
                            {{(scope.row.renwu_jiangli / 100).toFixed(2)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="renwu_dabiao"
                            label="当前进度（元）">
                        <template v-slot="scope">


                            {{(total / 100).toFixed(2)}} / {{(scope.row.renwu_dabiao /100).toFixed(2)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="操作">
                        <template v-slot="scope">
                            <template v-if="scope.row.renwu_dabiao <= total">
                                <el-link type="danger" v-if="!scope.row.wancheng_zhuangtai"
                                         @click="getReward(scope.row.Id)">
                                    领取奖励
                                </el-link>
                                <span class="text-success" v-else>
                                    已领取
                                </span>
                            </template>

                            <el-link type="primary" v-else @click="$router.push('/promotion')">前往邀请</el-link>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="title m-t-lg m-b">我的卡券</div>
                <el-table
                        v-loading="loading"
                        :data="ticket"
                        style="width: 100%">
                    <el-table-column
                            prop="jiangli_mingcheng"
                            label="卡券名称"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="jiangli_jine"
                            label="卡券金额（元）"
                    >
                        <template v-slot="scope">
                            {{(scope.row.jiangli_jine / 100).toFixed(2)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="jiangli_zhuangtai"
                            label="卡券状态">
                        <template v-slot="scope">

                            <span v-if="!scope.row.jiangli_zhuangtai" class="text-danger">未使用</span>
                            <span v-else class="text-success">已使用</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="create_time"
                            label="领取时间">
                    </el-table-column>
                    <el-table-column
                            prop="shiyong_time"
                            label="使用时间">

                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'task',
        components: {},
        data() {
            return {
                taskList: [],
                ticket: [],
                total: 0,
                loading: true
            }
        },
        computed: {},
        methods: {
            //获取任务列表
            getTask() {
                this.loading = true
                this.$axios.post(`/api/renwu/get_renwu`)
                    .then(res => {
                        this.loading = false
                        if (res.code == 200) {
                            this.taskList = res.data.renwu_xiangqing;
                            this.ticket = res.data.wode_quan;
                            this.total = res.data.muqian_jindu
                        }
                    })
            },
            //领取奖励
            getReward(renwu_id) {
                this.$axios.post(`/api/renwu/get_renwu_jiangli`, {renwu_id})
                    .then(res => {
                        if (res.code == 200) {
                            this.$message.success('领取成功');
                            this.getTask();
                        }
                    })
            }
        },
        mounted() {
            this.getTask()
        },
    }
</script>

<style lang="less" scoped>
    @import '~@/assets/css/varibles.less';

    .dialog-body {
        .title {
            font-size: 18px;
            border-left: 3px solid @primary-color;
            line-height: 1.2;
            padding-left: 3px;

        }
        /deep/ .el-dialog__header {
            display: none;
        }
    }
</style>
